<template>
  <div class="container">
    <div class='container_mdet'>
      <!-- 素材主体内容 -->
      <div class='section'>

        <block v-if="mtype==1">

          <!-- 描述 -->
          <div class="desc">
            <div class="head">分享文案:</div>
            <!-- <view class="body"></view> -->
            <scroll-view class="body" scroll-y="true">{{contents}}</scroll-view>
          </div>

          <!--图片-->
          <image mode="widthFix" :src='material_url'></image>

          <div class="tool">
            <div>
              <div @click='copyText(contents)'>复制文案</div>
            </div>
            <div>
              <div @click="down(material_url)">保存图片</div>
            </div>
          </div>
        </block>

        <block wx:else>

          <!-- 描述 -->
          <div class="desc">
            <div class="head">分享文案:</div>
            <div class="body">{{contents}}</div>
          </div>

          <!--视频-->
          <video objectFit='contain' :src="material_url" controls show-fullscreen-btn="false"></video>

          <div class="tool">
            <div>
              <div @click='copyText(contents)'>复制文案</div>
            </div>
            <div>
              <div @click="down(material_url,'isVideo')">下载视频</div>
            </div>
          </div>
        </block>

      </div>
    </div>

    <!-- 授权弹框 （保存相册） -->
    <div v-if="isalert" class='modal'>
      <div class='box'>
        <div class='text'>“美亿齿服务商应用程序”要保存图片或视频到您的相册</div>
        <div class='selectbtn'>
          <button @click='hidealert(1)' class='cancel'>取消</button>
          <div class='line'></div>
          <button @click='hidealert(2)' open-type="openSetting" class='cancel' @opensetting='handleSetting'
            style='color:#47B26A'>确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data() {
    return {
      mid: "", // 素材id
      mtype: 1, // 素材类型 1图片素材 2视频素材
      material_url: "", //素材路径
      isalert: false, // 授权弹框
      filePath: "", // 图片或视频保存文件
      ispage: "",
      contents: ""
    };
  },
  methods: {
    //获取详情
    getdetdata() {
      var data = {
        id: this.mid
      };
      common.mmk_Loading(0);
      common.fly_post("/api/act/material/material_detail", data, msg => {
        common.mmk_Loading(1);
        let res = msg.data;
        if (res.status_code == 0) {
          this.material_url = res.data.url;
          this.contents = res.data.share_desc;
        } else {
          common.mmk_Loading(2, res.msg);
        }
      });
    },
    // 授权弹框隐藏
    hidealert() {
      var that = this;
      that.isalert = false;
    },

    // 授权弹框是否确定
    handleSetting(e) {
      var that = this;
      var mtype = that.mtype;
      wx.getSetting({
        success: function(res) {
          if (res.authSetting["scope.writePhotosAlbum"]) {
            if (mtype == 1) {
              wx.saveImageToPhotosAlbum({
                filePath: that.filePath,
                success: function(data) {
                  wx.showToast({
                    title: "下载成功，已保存至相册",
                    icon: "none",
                    duration: 2000
                  });
                }
              });
            } else if (mtype == 2) {
              wx.saveVideoToPhotosAlbum({
                filePath: that.filePath,
                success: function(data) {
                  wx.showToast({
                    title: "下载成功，已保存至相册",
                    icon: "none",
                    duration: 2000
                  });
                }
              });
            }
          } else {
            wx.showToast({
              title: "下载失败",
              icon: "none",
              duration: 2000
            });
          }
        }
      });
    },

    // 下载素材授权
    down(material_url, idVideo) {
      var that = this;

      var material_url = that.material_url;

      wx.getSetting({
        success: function(res) {
          //如果第一次授权
          if (res.authSetting["scope.writePhotosAlbum"] === undefined) {
            //未授权
            wx.authorize({
              scope: "scope.writePhotosAlbum",
              success(res) {
                //授权成功
                that.isalert = false;
                if (!idVideo) {
                  common.save_poster(material_url);
                } else {
                  common.save_video(material_url);
                }
              },
              fail(res) {
                return;
              }
            });
            return;
          }

          //如果拒绝过授权  则再次调起授权
          if (res.authSetting["scope.writePhotosAlbum"] === false) {
            that.isalert = true;
            return;
          }

          if (that.isalert) {
            that.isalert = false;
          }

          if (!idVideo) {
            common.save_poster(material_url);
          } else {
            common.save_video(material_url);
          }
        }
      });
    },

    copyText: function(contents) {
      console.log(11, contents);
      let content = contents;

      if (content == "") {
        wx.showToast({
          title: "暂无可复制的文案",
          icon: "none",
          duration: 2000,
          mask: true
        });
        return false;
      }

      wx.setClipboardData({
        data: content,
        success: function(res) {
          wx.getClipboardData({
            success: function(res) {
              wx.showToast({
                title: "复制成功"
              });
            }
          });
        }
      });
    }
  },
  onLoad(options) {
    wx.setNavigationBarTitle({
      title: "素材详情"
    });
    var that = this;

    if (options.mid && options.class) {
      this.mid = options.mid;
      this.mtype = options.class;
    } else {
      wx.showToast({
        title: "未获取素材类型",
        icon: "none",
        duration: 2000
      });
      setTimeout(function() {
        wx.navigateBack({
          delta: 1
        });
      }, 500);

      return;
    }

    // 获取素材数据
    that.getdetdata();
  },
  onShow() {},
  watch: {}
};
</script>

<style lang="less" scoped>
/* material_det.wxss */
.container {
  width: 100%;
  height: 100%;
}
.container_mdet {
  height: 100%;

  padding: 0;
  margin: 0;
  /* background: black; */
}
/* 底部选项栏 */
.d_tab {
  width: 98%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: rgba(51, 51, 51, 0.3);
  display: flex;
  justify-content: space-between;
  padding: 10px 1%;
}
.d_tab .item {
  width: 23%;
  text-align: center;
  height: 25px;
  line-height: 25px;
}
.d_tab text {
  font-size: 12px;
  color: #fff;
}
.d_tab image {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 5px;
}
.d_tab .download {
  width: 16px;
  height: 16px;
}
.d_tab .likes {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.d_tab .line {
  width: 0;
  height: 15px;
  border-left: 1px solid #fff;
  opacity: 0.6;
  margin-top: 7px;
}
/* 素材主体 */
.section {
  height: 100%;
  overflow: auto;
  margin: 0;
  padding: 0;
  z-index: 10;
  padding-bottom: 55px;
  box-sizing: border-box;
}
.section image {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.section video {
  width: 100%;
  min-height: 100px;
  z-index: 10;
}
.download {
  width: 100%;
  height: 9%;
  background: white;
  padding-top: 14px;
}
/* .download button{
  width:240rpx;
  height:72rpx;
  border-radius:16rpx;
  border:2rpx solid rgba(102,102,102,1);
  line-height: 72rpx;
  font-size:32rpx;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(102,102,102,1);
  background: white;
} */
/* 素材标题 */
.m_title {
  width: 100%;
  height: 30px;
  position: fixed;
  bottom: 45px;
  left: 0;
  font-size: 14px;
  color: #fff;
  overflow: auto;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px 10px 0;
  z-index: 10000;
}

/* 授权弹框 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10000;
}
.modal .box {
  width: 80%;
  margin: 55% 10% 0;
  background: #fff;
}
.modal .box .text {
  text-align: center;
  font-size: 15px;
  color: #999;
  padding: 20px 15px 15px;
}
.modal .box .selectbtn {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #eee;
  height: 50px;
  line-height: 50px;
}
.modal .box .selectbtn button {
  height: 50px;
  width: 100%;
  line-height: 50px;
  background: #fff;
  font-size: 18px;
  text-align: center;
}
.modal .box .selectbtn .line {
  width: 0;
  height: 100%;
  border-left: 1px solid #eee;
}

.desc {
  height: 26%;
  margin: 5px 0;
  padding: 0 9px;
  width: auto;
  overflow: hidden;
}
.desc .head {
  font-size: 15px;
  margin-bottom: 10px;
  color: #444;
  font-weight: 700;
}
.desc .body {
  font-size: 15px;
  color: #333;
  background-color: #ddd;
  border-radius: 5px;
  padding: 7px 12px;
  height: 72%;
  display: block;
  width: 94%;
}

/* 固定按钮 */
.tool {
  position: fixed;
  bottom: 0px;
  display: flex;
  background-color: #fff;
  height: 55px;
  /* line-height: 10%; */
  justify-content: space-between;
  width: 80%;
  padding: 0 10%;

  border-top: 1px solid #6f6f6f;
}

.tool > div {
  background-color: #fff;
  color: #6f6f6f;
  border: 1px solid #6f6f6f;
  border-radius: 5px;
  font-size: 17px;
  /* border:2rpx solid rgba(102,102,102,1); */
  height: 35px;
  line-height: 35px;
  margin-top: 10px;
  padding: 0 14px;
}
</style>

